<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div id="rcfz" ref="el" class="rencaifazhan">
    <Transition name="animate-left">
      <div v-show="show" class="left">
        <h1 class="title">
          人才发展
        </h1>
        <div class="flex flex-col text-[18px] leading-[36px]">
          <span>走进中瑞：了解中瑞，一对一带教，逐步进入工作状态</span>
          <span>华丽转身：由学生向职场人转变，由职场人向中瑞人转变</span>
          <span>独挑大梁：潜力逐步开发，专业能力更上一层，挑战更核心岗</span>
          <span>中瑞合伙人：成为公司不可或缺的重要伙伴，共同参与公司经营</span>
        </div>
      </div>
    </Transition>
    <Transition name="animate-right">
      <img v-show="show" class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/join-1.png" alt="">
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.rencaifazhan {
  width: 1200px;
  margin: 0 auto;
  min-height: 500px;
  padding-top: 50px;
  padding-bottom: 80px;
  display: flex;
  align-content: center;
  justify-content: space-between;

  .left {
    display: flex;
    margin-right: 100px;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 34px;
      font-style: italic;
      font-family: PangMenZhengDaoBiaoTiTi;
    }
  }

  .img {
    width: 573px;
    height: 369px;
  }
}
</style>
